iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 4
2
Modern Web

Chrome extension 學習手札系列 第 4

Chrome extension 學習手札 04 - Chrome API 介紹

  • 分享至 

  • xImage
  •  

昨天我們已經把空的專案掛起來使用了,接下來我們要來了解組件之間怎麼溝通以及如何運用chrome的api,而chrome api 有非常多的功能,如果要看的話可以到這裡查看,在此我先介紹幾個常用到的chrome api,但其他的我建議要用的時候再學就好了。

chrome.runtime

這個api控管了整個應用程式的核心功能,它有內建應用程式的生命週期事件,並且有許多方法可以取得應嫆程式的基本資料,也可以在後台腳本建立許多的監聽事件,ex:onConnect以及onMessage,前者是建立一個持續性的請求,後者是一次性的請求,甚至還可以接收到其他擴充功能或網站來的請求,在我們後面的開發會頻繁的使用到。

chrome.tabs

這個api會管理所有chrome tab的操作,無論是要新增、更新、關閉、複製、重新載入、搜尋...等等基本功能,甚至也可以對特定的tab注入css語法以及js腳本,還可以設定當前的zoom以及擷取到網站的語系,基本上也是功能很強大的一個api,不過每個方法使用以前要檢查一下manifest的權限是否許可,並且可以對tab建立監控事件,例如在畫面被更新時或關閉時可以捕捉狀態。

chrome.storage

擁有與localStorage API相同的功能,但是有為了extension做了一些優化,官方文件說明如下:

  • 數據可以跟Chrome自動同步(使用storage.sync)
  • UI頁面以及內容腳本都可以直接獲得數據,而不用經過後台腳本
  • 就算使用分離式隱身行為(split incognito behavior),用戶的擴展程序設置也會保留
  • 新修刪查等功能都是異步執行,所以效能比localstorage強
  • 用戶數據可以被儲存成物件(localStorage API 是以字串的方式儲存數據)
  • 可以讓擴充功能讀取設定檔,讓管理員可以設定企業策略(使用storage.managed與schema檔 )

chrome.contextMenus

這是管理擴充功能的右鍵選單,這個功能強大的地方在於可以設定右鍵功能在不同的地方,例如:當前頁面、連結、圖片、影片、選取項目、擴充功能UI頁面等等.....,所以支援度非常高。

chrome.webRequest

這是管理著瀏覽器請求的服務,可以讓後台監控瀏覽器是否向伺服器請求。主要是在一個網路請求的生命週期內,監控到request body、header、http authentication,reponse body等等資料,也可以在請求之前對目標網址做駁回請求或竄改header的功能,直到順利完成或例外處理為止。

chrome.history

大家看名子就知道了,這是一個管理瀏覽紀錄的功能,甚至可以整個覆寫瀏覽紀錄。

這個資料真的是龐大到無法一次整理出來,只能挑選一些比較常用的。
祝大家中秋節快樂!


上一篇
Chrome extension 學習手札 03 - 傑出的起手
下一篇
Chrome extension 學習手札 05 - Resize 視窗
系列文
Chrome extension 學習手札30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言